<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>08-盒子模型</title>
    <style>
      /*   .box {
        width: 200px;
        height: 200px;
        background-color: tomato;
      
            标准盒模型（默认值） 
            box-sizing: content-box;
            内容区域不会发生变化，永远都是初始的时候设置盒子的大小
            如果加上padding和border，不会影响盒子内容区域，但是盒子所占整个页面的空间的大小会发生改变
        
        box-sizing: content-box;
        border: 10px solid yellowgreen;
        padding: 10px;
        margin: 10px;
      }*/
      .box {
        width: 200px;
        height: 200px;
        background-color: tomato;
        /* 
            怪异盒模型
             box-sizing: border-box;
            盒子所占整个页面的空间的大小不会发生改变
            如果加上padding和border，不会影响盒子所占整个页面的空间的大小，但是盒子内容区域会相应的减少
        */
        box-sizing: border-box;
        border: 10px solid yellowgreen;
        padding: 10px;
        /*  margin: 10px; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
